import QtQuick 1.1
import QtWebKit 1.0
import com.nokia.meego 1.0
import "Utils.js" as Utils
import "Logger.js" as Logger

Page {
  id: feedItemView
  tools: Toolbar { id: commonTools }
  anchors.fill: parent

  Rectangle {
    id: main
    color: "#ffffff"
    width: parent.width
    height: parent.height

    TopBar { id: topBar }

    Component {
      id: listDelegate

      Row {
        id: contentRow
        width: main.width
        height: main.height

        Flickable {
          id: flicker
          width: parent.width
          height: parent.height
          flickableDirection: Flickable.VerticalFlick
          contentWidth: main.width - 15
          contentHeight: webContent.height + topBar.height + 15

          WebView {
            id: webContent
            property variant item: appState.feedModel.get(appState.currentIndex) !== undefined ? appState.feedModel.get(appState.currentIndex) : {}
            property string css: "<style type=\"text/css\">"
                                 + "h1{font-size:20px;color:#7d2755}"
                                 + "h3{font-size:18px;color:#DD4814}"
                                 + "p,ul,ol,strong{font-size:16px;color:#4F4F4F}"
                                 + "a:link{color:#08A8C5}"
                                 + ".subtitle{font-size:14px;text-align:right}"
                                 + "img{max-width:" + (main.width - 30) + "px;height:auto}"
                                 + "</style>"
            property string postText: item.title !== undefined
                                      ? "<html>" + css
                                        + "<h1>" + item.title + "</h1>"
                                        + "<p class=\"subtitle\">" + item.author + " on " + Utils.extractDate(item.pubDate) + "</p>"
                                        + Utils.formatContent(item.content) + "</html>"
                                      : ""
            html: postText
            url: item.title !== undefined ? item.title : ""
            anchors.left: parent.left
            anchors.right: parent.right
            settings.pluginsEnabled: true
            settings.javascriptEnabled: true
            smooth: true
            settings.standardFontFamily: "Nokia Pure"
            onUrlChanged: {
              if(Utils.urlIsExternal(url)){
                Qt.openUrlExternally(url)
                webContent.stop.trigger()
                webContent.back.trigger()
              }
              flicker.returnToBounds()
            }
          }
        }
      }
    }

    ListView {
      id: posts
      model: appState.feedModel
      delegate: listDelegate
      orientation: ListView.Horizontal
      Component.onCompleted: positionViewAtIndex(appState.currentIndex, ListView.Visible)
      boundsBehavior: Flickable.DragOverBounds
      snapMode: ListView.SnapOneItem
      highlightRangeMode: ListView.StrictlyEnforceRange
      highlightFollowsCurrentItem: true
      anchors.top: topBar.bottom
      anchors.topMargin: 15
      anchors.bottom: parent.bottom
      anchors.bottomMargin: 10
      anchors.right: parent.right
      anchors.rightMargin: 7
      anchors.left: parent.left
      anchors.leftMargin: 7

      onCurrentIndexChanged: {
        appState.currentIndex = posts.currentIndex
      }
    }
  }
}
